// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app) {
  // 定义全局指令
  app.directive('img-lazy', {
      // vue2 中这里是 inserted vue3中这里是 mounted
      // el: 指令绑定的那个元素 -- 这里是 img
      // binding: binding.value 指令等于号后面的东西 -- 这里是 img 的 url
      mounted(el, binding) {
        //  Vueuse 中的 useIntersectionObserver方法, 用于懒加载, 检测某个元素是否进入可视区
        // 第一参数是要监听的元素
        // 第二个参数是一个回调函数, isIntersecting是一个布尔值, 当监听元素进入可视区为 true
        // 这个函数 可以返回一个 stop方法
        const {stop} = useIntersectionObserver(
          el,
          ([{isIntersecting}]) => {
            // 进入视口区
            if(isIntersecting) {
              // console.log(isIntersecting)
              el.src = binding.value
              // 一旦图片加载出来就不需要监听
              stop()
            }
          }
        )
      }
    })
  }
}